<template>
    <!-- 图片 -->
    <div
        class="content-attach-item"
        v-if="images&&images.length>0">
        <div class="content-item-label ">{{$st('Pictures')}}</div>
        <van-grid
            class="image-item"
            square
            :gutter="12"
            :border="false"
            :column-num="4">
            <van-grid-item
                v-for="(img, index) in images"
                :key="index"
            >
                <van-image
                    @click="onShowImages(index)"
                    class="order-image"
                    :alt="img.filename"
                    :src="img.fileurl"
                    fit="scale-down"
                    width="70px"
                    height="70px"

                />
            </van-grid-item>
        </van-grid>
    </div>
    <div
        class="content-item"
        v-else>
        <div class="content-item-label">{{$st('Pictures')}}</div>
        <div class="content-item-text">{{$st('wp_No_picture_yet')}}</div>
    </div>
    <!-- 附件 -->
    <div
        class="content-attach-item"
        v-if="otherFiles&&otherFiles.length>0">
        <div class="content-item-label">{{$st('attachment')}}</div>
        <div>
            <file-bar
                class="filebar"
                :file="file"
                v-for="(file, index) in otherFiles"
                :key="index"
            >
            </file-bar>
        </div>
    </div>
    <div
        class="content-item"
        v-else>
        <div class="content-item-label">{{$st('attachment')}}</div>
        <div class="content-item-text">{{$st('No_attachments')}}</div>
    </div>
</template>
<script>
import { computed } from 'vue';
import { ImagePreview } from 'vant';
import FileBar from '@/components/_common/FileBar.vue';
export default {
    components: {
        FileBar
    },
    props: {
        attachments: Array
    },
    setup (props) {
        const imgExt = ['.png', '.jpg', '.bmp', '.jpeg', '.svg'];
        // 图片
        const images = computed(() => {
            const files = props.attachments || [];
            return files.filter(
                (f) =>
                    imgExt.indexOf(f.filename.substring(f.filename.lastIndexOf('.')).toLowerCase()) >= 0
            );
        });

        // 附件
        const otherFiles = computed(() => {
            const files = props.attachments || [];
            return files.filter(
                (f) =>
                    imgExt.indexOf(f.filename.substring(f.filename.lastIndexOf('.')).toLowerCase()) < 0
            );
        });

        // 点击显示图片
        const onShowImages = (index) => {
            ImagePreview({
                images: images.value.map(item => {
                    return item.fileurl;
                }),
                startPosition: index

            });
        };
        return {
            onShowImages,
            images,
            otherFiles
        };
    }
};
</script>
<style lang='scss' scoped>
.content-attach-item {
    padding-top: 5px;
    padding-bottom: 5px;
}
.content-item {
    width: 100%;
    display: flex;
    align-items: center;
    padding-top: 5px;
    padding-bottom: 5px;
    font-size: 13px;
}
.content-item-label {
    text-align: left;
    min-width: 100px;
    width: 20%;
    color: rgba(0, 0, 0, 0.6);
}
.image-item{
    padding-top:  10px;
}
.content-item-text {
    flex-grow: 1;
    font-weight: 400;
    text-align: left;
    line-height: 20px;
    color: #000000;
    margin-right: 5px;
    word-wrap: break-word;
    word-break:break-word;
}
</style>
